import React, {useEffect, useState} from 'react';
import {Breadcrumb, Button, Col, Form, Input, Layout, message, Modal, Popconfirm, Row, Space} from "antd";
import {Content} from "antd/es/layout/layout";
import MyTable from "../../../../pages/Mytable";
import {useNavigate, useParams} from "react-router-dom";
import {getAllSystemModuleByPage,deleteModuleById,getModuleById,addModule,modifyModuleById} from '../../../../api/systemModule'

function SystemModule(props) {
    const navigate = useNavigate()
    const {id} = useParams()
    const [searchForm] = Form.useForm();
    const [moduleForm] = Form.useForm();
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [total, setTotal] = useState(0);
    const [loading, setLoading] = useState(false);
    const [edit, setEdit] = useState(false);
    const [data, setData] = useState([]);
    const [systemModule,setSystemModule] = useState({
        "system_id":Number(id),
        "module_name":""
    })
    const [page, setPage] = useState({
        "system_id": Number(id),
        "current": 1,
        "pageSize": 10
    })
    const pagination = {
        onShowSizeChange: (current, pageSize) => {
            paginationChange(current, pageSize)
        },
        onChange: (current, pageSize) => {
            paginationChange(current, pageSize)
        },
        showSizeChanger: true,
        total,
        current: page.current,
        pageSize: page.pageSize,
        defaultPageSize: 10,
        pageSizeOptions:
            [5, 10, 15, 20]
    }
    const paginationChange = async (current, pageSize) => {
        setPage({
            system_id: Number(id),
            pageSize,
            current
        })
    }
    const columns = [
        {
            title: '模块名称',
            dataIndex: 'module_name',
        },
        {
            title: '操作',
            dataIndex: 'repayment',
            render: (_, record) => (<Space>
                <Button type='primary' onClick={async () => {
                    const {data:res} = await getModuleById(record.id)
                    console.log(res)
                    moduleForm.setFieldsValue(res.data)
                    message.success(res.msg)
                    setEdit(true)
                    setIsModalVisible(true)
                }}>编辑</Button>
                <Popconfirm title="确认删除？"
                            okText="确认"
                            cancelText="取消"
                            onConfirm={async () => {
                                const {data:res} = await deleteModuleById(record.id)
                                message.success(res['msg'])
                                setPage({...page,current: 1})
                            }}>
                    <Button type='danger'>删除</Button></Popconfirm>
            </Space>)
        }
    ];

    useEffect(() => {
        setLoading(true)
       const initData = async ()=>{
           const { data:res} = await getAllSystemModuleByPage({...page,...systemModule})
           const {records,total} = res.data
           setData(records)
           setTotal(total)
           setLoading(false)
       }
        initData()
    }, [page,systemModule]);

    return (
        <Layout style={{padding: '0 24px 24px'}}>
            <Breadcrumb style={{margin: '16px 0'}}>
                <Breadcrumb.Item onClick={() => navigate("/main")}>首頁</Breadcrumb.Item>
                <Breadcrumb.Item onClick={() => navigate("/main/interfaces")}>接口管理</Breadcrumb.Item>
                <Breadcrumb.Item>模块管理</Breadcrumb.Item>
            </Breadcrumb>
            <Content
                className="site-layout-background"
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                }}
            >
                <Form
                    name="basic"
                    autoComplete="off"
                    form={searchForm}
                    style={{
                        marginBottom: '10px'
                    }}
                    onFinish={(values) => {
                        setSystemModule({...systemModule,...values})
                        setPage({...page, current: 1})
                    }}
                >
                    <Row gutter={24}>
                        <Col span={8}><Form.Item
                            label="模块名称"
                            name='module_name'
                        >
                            <Input/>
                        </Form.Item></Col>
                        <Col
                            span={16}
                            style={{
                                textAlign: 'right',
                            }}
                        >
                            <Space>
                                <Button type="primary" onClick={() => {setIsModalVisible(true)}}>
                                    添加模块
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button
                                    onClick={() => {
                                        searchForm.resetFields()
                                        setSystemModule({...systemModule,module_name:""})
                                        setPage({...page, current: 1})
                                    }}
                                >
                                    重置
                                </Button>
                            </Space>
                        </Col>
                    </Row>
                </Form>
                <MyTable
                    columns={columns}
                    dataSource={data}
                    pagination={pagination}
                    bordered
                    loading={loading}
                />
                <Modal title={edit ? '编辑接口' : '添加接口'} visible={isModalVisible} closable={false} footer={null}>
                    <Form
                        name="systemModule"
                        autoComplete="off"
                        layout={'vertical'}
                        form={moduleForm}
                        onFinish={async (values) => {
                            if(edit){
                                const {data:res} = await modifyModuleById(values)
                                message.success(res['msg'])
                            }else {
                                const {data:res} = await addModule({...values,system_id:Number(id)})
                                message.success(res['msg'])
                            }
                            setIsModalVisible(false)
                            moduleForm.resetFields()
                            setEdit(false)
                            setPage({...page})
                        }}
                    >
                        <Form.Item
                            label="id"
                            name="id"
                            style={{display: 'none'}}
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="system_id"
                            name="system_id"
                            style={{display: 'none'}}
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            label="模块名称"
                            name="module_name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入模块名称',
                                },
                            ]}
                        >
                            <Input/>
                        </Form.Item>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        ><Space>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                            <Button type="default" onClick={async () => {
                                moduleForm.resetFields()
                                setEdit(false)
                                setIsModalVisible(false)
                            }}>
                                取消
                            </Button>
                        </Space>
                        </Form.Item>
                    </Form>
                </Modal>
            </Content>
        </Layout>
    );
}

export default SystemModule;